import React, { useState } from 'react';
import Hello from './Hello'
import Comment from './Comment'

function App() {
  const name = "demo"
  const h1 = <h1 style={{color:'red', fontSize: 22}}>欢迎学习react</h1>
  const isLogin = true
  const [count, setCount] = useState(0)
  const add =(num) => {
    setCount(num + count)
  }
 
  return (
    <div>
      <div>
        <p>{name}</p>
        {h1}
        {isLogin ? <span>欢迎: {name}</span> : <span>'您好，请登录'</span>}
      </div>
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => add(2)}>
          Click me
        </button>
      </div>
      <Hello count={count}/>
      <br/>
      <Comment/>
    </div>
  );
}

// 创建函数组件
//const App = () => <div>这是我的第一个函数组件</div>

// 创建类组件
// class App extends React.Component {
//   render() {
//     return (
//       <div>这是我的第一个类组件</div>
//     )
//   }
// }

// // 导入Hello组件
// import Hello from './Hello'
// const App = () => <Hello/>
export default App;
